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,11 +1,10 @@
<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">
<v-layout align-left justify-left wrap class="my-3"> <v-layout align-left justify-left wrap class="my-3">
<h3 class="ml-3 CSSD-font">Test Type : {{ TestType }}</h3> <h3 class="ml-3 CSSD-font">Test Type : {{ TestType }}</h3>
<v-flex xs12> <v-flex xs12>
<hr class="v-divider theme--light" /> <hr class="v-divider theme--light"/>
</v-flex> </v-flex>
<v-layout row wrap class="ml-4"> <v-layout row wrap class="ml-4">
<v-flex xs12 md12 sm12> <v-flex xs12 md12 sm12>
@@ -73,39 +72,41 @@
<v-layout align-left justify-left wrap class="my-3"> <v-layout align-left justify-left wrap class="my-3">
<h3 class="ml-3 CSSD-font">Special Info</h3> <h3 class="ml-3 CSSD-font">Special Info</h3>
<v-flex xs12> <v-flex xs12>
<hr class="v-divider theme--light" /> <hr class="v-divider theme--light"/>
</v-flex> </v-flex>
<v-layout row wrap class="ml-4"> <v-layout row wrap class="ml-4">
<template v-if="data.inputs"> <template v-if="data.inputs">
<v-flex xs12 md12 sm12 v-for="(inputData, keyInputs) in data.inputs" :key="keyInputs"> <v-flex xs12 md12 sm12 v-for="(inputData, keyInputs) in data.inputs" :key="keyInputs">
<span class="title">{{keyInputs}} :</span> <span class="title">{{ keyInputs }} :</span>
<span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important"> <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">
{{inputData}} {{ inputData }}
</span> </span>
</v-flex> </v-flex>
</template> </template>
<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"
{{data}}, v-for="(data, dataKey) in optionData" :key="dataKey">
{{ 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"
<h3 class="ml-3 CSSD-font">{{keyForm}}</h3> xs12 md12 sm12 v-for="(formData, keyForm) in data.children" :key="keyForm">
<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">
<span class="title CSSD-font">{{keyChild}} :</span> <span class="title CSSD-font">{{ keyChild }} :</span>
<template v-if="Array.isArray(childData)"> <template v-if="Array.isArray(childData)">
<span style="letter-spacing:0 !important" class="headline ml-2 CSSD-font" <span style="letter-spacing:0 !important" class="headline ml-2 CSSD-font"
v-for="(data, dataKey) in childData" :key="dataKey"> v-for="(data, dataKey) in childData" :key="dataKey">
{{data}}, {{ data }},
</span> </span>
</template> </template>
<template v-else> <template v-else>
<span class="headline ml-2 CSSD-font">{{childData}}</span> <span class="headline ml-2 CSSD-font">{{ childData }}</span>
</template> </template>
</div> </div>
</div> </div>
@@ -116,22 +117,37 @@
<v-layout align-left justify-left wrap class="my-3"> <v-layout align-left justify-left wrap class="my-3">
<h3 class="ml-3 CSSD-font">Image</h3> <h3 class="ml-3 CSSD-font">Image</h3>
<v-flex xs12> <v-flex xs12>
<hr class="v-divider theme--light" /> <hr class="v-divider theme--light"/>
</v-flex> </v-flex>
<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>
@@ -146,28 +162,40 @@
</template> </template>
<script> <script>
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) {
const result = await axios.get(urls.showTestResult(id)); const result = await axios.get(urls.showTestResult(id));
if (result.status == 200) { if (result.status == 200) {
this.data = result.data.data; this.data = result.data.data;
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;
@@ -204,8 +232,8 @@ export default {
}, },
created() { created() {
if (this.$route.params.id) { if (this.$route.params.id) {
this.load(this.$route.params.id); this.load(this.$route.params.id);
} }
}, },
}; };
+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">