fix : test-result details image and barcode

This commit is contained in:
zeinab.ashrafi
2025-04-23 11:55:25 +03:30
parent 6b18d07b73
commit d84a9a18c0
2 changed files with 68 additions and 42 deletions
@@ -1,4 +1,3 @@
<template> <template>
<v-container grid-list-xs> <v-container grid-list-xs>
<material-card color="black" title="Show Test Result" id="printMe"> <material-card color="black" title="Show Test Result" id="printMe">
@@ -87,13 +86,15 @@
<template v-if="data.options"> <template v-if="data.options">
<v-flex xs12 md12 sm12 v-for="(optionData, keyOptions) in data.options" :key="keyOptions"> <v-flex xs12 md12 sm12 v-for="(optionData, keyOptions) in data.options" :key="keyOptions">
<span class="title CSSD-font">{{ keyOptions }} :</span> <span class="title CSSD-font">{{ keyOptions }} :</span>
<span style="letter-spacing:0 !important" class="headline ml-2 CSSD-font" v-for="(data, dataKey) in optionData" :key="dataKey"> <span style="letter-spacing:0 !important" class="headline ml-2 CSSD-font"
v-for="(data, dataKey) in optionData" :key="dataKey">
{{ data }}, {{ data }},
</span> </span>
</v-flex> </v-flex>
</template> </template>
<template v-if="data.children"> <template v-if="data.children">
<v-flex class="mt-4 pb-4" style="border-left:3px solid #32c5d2;border-bottom:1px solid #ddd" xs12 md12 sm12 v-for="(formData, keyForm) in data.children" :key="keyForm"> <v-flex class="mt-4 pb-4" style="border-left:3px solid #32c5d2;border-bottom:1px solid #ddd"
xs12 md12 sm12 v-for="(formData, keyForm) in data.children" :key="keyForm">
<h3 class="ml-3 CSSD-font">{{ keyForm }}</h3> <h3 class="ml-3 CSSD-font">{{ keyForm }}</h3>
<div v-for="(childData, keyChild) in formData" :key="keyChild"> <div v-for="(childData, keyChild) in formData" :key="keyChild">
<div class="ml-4"> <div class="ml-4">
@@ -121,17 +122,32 @@
<v-layout row wrap class="ml-4"> <v-layout row wrap class="ml-4">
<v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key"> <v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
<template v-if="file.file_type == 'document'"> <template v-if="file.file_type == 'document'">
<a target="_blank" :href="'/'+file.path"> <a target="_blank" :href="'/'+file.thumbnail">
<v-icon class="mr-2 caption">fas fa-check</v-icon> <v-icon class="mr-2 caption">fas fa-check</v-icon>
{{ file.file_name }} {{ file.file_name }}
</a> </a>
</template> </template>
<template v-else> <template v-else>
<img :src="'/'+file.path" style="width: 100%" /> <img :src="'/'+file.thumbnail" style="width: 100%"/>
</template> </template>
</v-flex> </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>
<v-flex xs12>
<hr class="v-divider theme--light">
</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/>
<span class="CSSD-font">Item ID : {{ data.id }}</span>
</v-flex>
<v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-C">
<img :src="QRCodeimg" class="WM-Width-150">
</v-flex>
</v-layout>
</v-layout>
</v-layout> </v-layout>
<v-layout row wrap style="text-align:center"> <v-layout row wrap style="text-align:center">
<v-flex class xs12 md2 sm12> <v-flex class xs12 md2 sm12>
@@ -149,12 +165,15 @@
import {mapGetters, mapMutations} from "vuex"; import {mapGetters, mapMutations} from "vuex";
import axios from "axios"; import axios from "axios";
import {urls} from "@show/config/urls"; import {urls} from "@show/config/urls";
export default { export default {
data: () => ({ data: () => ({
data: {}, data: {},
TestType: '', TestType: '',
MedicalCenter: '', MedicalCenter: '',
User : '' User: '',
QRCodeimg: '',
barcodeimg: '',
}), }),
methods: { methods: {
async load(id) { async load(id) {
@@ -165,9 +184,18 @@ export default {
this.TestType = result.data.data.test_type.name; this.TestType = result.data.data.test_type.name;
this.MedicalCenter = result.data.data.user.medical_center.name; this.MedicalCenter = result.data.data.user.medical_center.name;
this.User = this.data.user.name; this.User = this.data.user.name;
if (this.data) {
this.generateBarcode(this.data);
}
}
},
async generateBarcode(item) {
const result = await axios.post(urls.Barcode(item.id, 'TestResult'));
if (result && result.status == 200) {
this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null;
this.barcodeimg = result.data.data.Barcode ? result.data.data.Barcode : null;
} }
}, },
print() { print() {
const prtHtml = document.getElementById("printMe").innerHTML; const prtHtml = document.getElementById("printMe").innerHTML;
+7 -9
View File
@@ -23,12 +23,12 @@
></v-autocomplete> ></v-autocomplete>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3" v-model="filter.sterilizer_id" label="Sterilizer ID" color="black"></v-text-field> <v-text-field class="py-3" v-model="filter.sterilizer_id" label="Sterilizer ID" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number" color="black"></v-text-field> <v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 md2 sm3> <v-flex xs12 md2 sm3>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()"> <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
@@ -78,8 +78,7 @@
<router-link <router-link
class="LinkBtn" class="LinkBtn"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
:to="{name: 'EditLabel', params: {label: item.id}}" :to="{name: 'EditLabel', params: {label: item.id}}">
>
<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2"> <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon> <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<span>Edit</span> <span>Edit</span>
@@ -95,8 +94,7 @@
color="pink" color="pink"
class="WM-ActionButton mr-2" class="WM-ActionButton mr-2"
@click="remove(item.id)" @click="remove(item.id)"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
>
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon> <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
<span>Remove</span> <span>Remove</span>
</v-btn> </v-btn>
@@ -119,7 +117,7 @@
</v-layout> </v-layout>
<v-divider></v-divider> <v-divider></v-divider>
<div class="text-xs-center" v-if="lastPage > 1"> <div class="text-xs-center" v-if="lastPage > 1">
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination> <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
</div> </div>
<v-layout row wrap align-center justify-center class="mt-3"> <v-layout row wrap align-center justify-center class="mt-3">
<router-link to="/dashboard"> <router-link to="/dashboard">