fix : display data in details and style

This commit is contained in:
zeinab.ashrafi
2025-04-23 11:53:24 +03:30
parent 8482e6bc53
commit b5abe4d2c8
4 changed files with 82 additions and 78 deletions
+2 -6
View File
@@ -32,8 +32,8 @@
</v-list-tile-avatar> -->
<v-list-tile-content>
<v-list-tile-title>{{ name }}</v-list-tile-title>
<v-list-tile-sub-title>{{ cell_number }}</v-list-tile-sub-title>
<v-list-tile-title>{{ $store.state.user.name }}</v-list-tile-title>
<v-list-tile-sub-title>{{ $store.state.user.cell_number }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
@@ -90,8 +90,6 @@ export default {
title: null,
responsive: false,
responsiveInput: false,
name: '',
cell_number: '',
}),
watch: {
@@ -104,8 +102,6 @@ export default {
mounted() {
this.onResponsiveInverted();
window.addEventListener('resize', this.onResponsiveInverted);
this.cell_number = this.$store.state.user.cell_number;
this.name = this.$store.state.user.name;
},
beforeDestroy() {
window.removeEventListener('resize', this.onResponsiveInverted)
+35 -10
View File
@@ -112,7 +112,7 @@
</template>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="my-3">
<v-layout align-left justify-left wrap class="my-3" v-if="data.files.length">
<h4 class="ml-4 headline CSSD-font font-weight-bold">Image</h4>
<v-flex xs12>
<hr class="v-divider theme--light"/>
@@ -132,6 +132,24 @@
</v-flex>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="my-3">
<h3 class="CSSD-font">Barcode And QRCode Image</h3>
<v-flex xs12>
<hr class="v-divider theme--light">
</v-flex>
<v-layout row wrap class="align-center mt-3">
<v-flex xs12 md6 sm6 v-if="barcodeimg">
<img :src="barcodeimg" class="WM-Width-350"><br/>
<span class="CSSD-font">Test Result ID : {{ data.id }}</span>
</v-flex>
<v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-R">
<a :href="'https://www.cssd-doc.com/Show/TestResult/' + data.id + ''" target="_blank">
<img :src="QRCodeimg" class="WM-Width-150">
</a>
</v-flex>
</v-layout>
</v-layout>
<!-- </material-card>
<material-card> -->
<v-layout row wrap align-center justify-center class="my-3" v-if="$hasRole('Admin|Supervisor')">
@@ -165,20 +183,18 @@
</v-container>
</template>
<script>
export default {
data: () => ({
data: {}
})
};
</script>
<script>
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'
export default {
data: () => ({}),
data: () => ({
data: {},
QRCodeimg: '',
barcodeimg: ''
}),
methods: {
...mapMutations("modal", ["closeModal", "setResultModal"]),
async verify(id, value) {
@@ -188,6 +204,13 @@ export default {
this.closeModal();
}
},
async generateBarcode(item) {
const result = await ApiService.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() {
const prtHtml = document.getElementById("printMe").innerHTML;
@@ -224,10 +247,12 @@ export default {
},
created() {
this.data = this.getModalProperties.result.data.data;
},
computed: {
...mapGetters("modal", ["getModalProperties"])
},
mounted() {
this.generateBarcode(this.data);
}
};
</script>
+18 -1
View File
@@ -113,6 +113,17 @@
</template>
<span>Generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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>
<span class="CSSD-font">Transfer</span>
</v-btn>
</template>
<span>Transfer</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
@@ -291,7 +302,13 @@ export default {
const target = this.items.find(i => i.id === item.id)
if (target) target.status = newStatus
}
}
},
async transfer(data) {
this.changeCurrentModal({
modal: "modal-user-list",
properties: {data},
});
},
},
watch: {
currentPage(page) {
+27 -61
View File
@@ -32,7 +32,8 @@
</v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="far fa-calendar-alt mr-2"/>
<v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
<v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
offset-y
v-model="fromMenu" style="width: 100%">
<v-text-field class="pt-3 pr-3" required slot="activator" label="FromDate"
v-model="filter.fromPicker" color="black"/>
@@ -42,7 +43,8 @@
</v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" style="display: flex;align-items: center;">
<v-icon class="far fa-calendar-alt mr-2"/>
<v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
<v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
offset-y
v-model="upToMenu" style="width: 100%">
<v-text-field class="pt-3 pr-3" required slot="activator" label="UpToDate" color="black"
v-model="filter.upToPicker"/>
@@ -54,7 +56,9 @@
<v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load(null, null)">
<v-btn v-bind="attrs" v-on="on"
color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2"
@click="load(null, null)">
<v-icon class="black--text caption">fas fa-search</v-icon>
</v-btn>
</template>
@@ -108,9 +112,9 @@
<td class="text-xs-right FlexBtn justify-self-end">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn color="cyan" class="mr-2" @click="show(item.id)" v-bind="attrs"
<v-btn color="light-gray" class="mr-2" @click="show(item.id)" v-bind="attrs"
v-on="on">
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
<v-icon class="black--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span>
</v-btn>
</template>
@@ -118,10 +122,10 @@
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn color="orange" class="mr-2"
<v-btn color="light-gray" class="mr-2"
@click="generateBarcode(item.id, 'TestResult')" v-bind="attrs"
v-on="on">
<v-icon class="white--text mr-1 caption">fa fa-bars</v-icon>
<v-icon class="black--text mr-1 caption">fa fa-bars</v-icon>
<span>generate Barcode</span>
</v-btn>
</template>
@@ -133,7 +137,7 @@
<router-link class="LinkBtn"
v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
:to="{ name: 'EditTestResult', params: { testResult: item.id } }">
<v-btn color="orange" class="mr-2" v-bind="attrs" v-on="on">
<v-btn color="black" class="mr-2" v-bind="attrs" v-on="on">
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<span>Edit</span>
</v-btn>
@@ -144,7 +148,7 @@
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
<v-btn color="pink" class="WM-ActionButton" @click="removeModal(item.id)"
<v-btn color="red" class="WM-ActionButton" @click="removeModal(item.id)"
v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
v-bind="attrs" v-on="on">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -223,54 +227,19 @@ export default {
lastPage: 1,
testTypes: [],
medicalCenters: [],
deviceLabels: [{
name: "Washer ID",
id: "Washer ID"
},
{
name: "Autoclave ID",
id: "Autoclave ID"
},
{
name: "Sterilizer ID",
id: "Sterilizer ID"
},
{
name: "Seal Machine ID",
id: "Seal Machine ID"
},
{
name: "Patiant ID",
id: "Patiant ID"
},
{
name: "Set/Pack ID",
id: "Set/Pack ID"
},
{
name: "Medical Device ID",
id: "Medical Device ID"
},
{
name: "OR ID",
id: "OR ID"
},
{
name: "Personal ID",
id: "Personal ID"
},
{
name: "Instrument ID",
id: "Instrument ID"
},
{
name: "Basket ID",
id: "Basket ID"
},
{
name: "Implant ID",
id: "Implant ID"
},
deviceLabels: [
{name: "Washer ID", id: "Washer ID"},
{name: "Autoclave ID", id: "Autoclave ID"},
{name: "Sterilizer ID", id: "Sterilizer ID"},
{name: "Seal Machine ID", id: "Seal Machine ID"},
{name: "Patiant ID", id: "Patiant ID"},
{name: "Set/Pack ID", id: "Set/Pack ID"},
{name: "Medical Device ID", id: "Medical Device ID"},
{name: "OR ID", id: "OR ID"},
{name: "Personal ID", id: "Personal ID"},
{name: "Instrument ID", id: "Instrument ID"},
{name: "Basket ID", id: "Basket ID"},
{name: "Implant ID", id: "Implant ID"},
]
}),
created() {
@@ -363,10 +332,7 @@ export default {
},
getModalResult(testResult) {
for (const key in this.items) {
if (
this.items.hasOwnProperty(key) &&
this.items[key].id == testResult.id
) {
if (this.items.hasOwnProperty(key) && this.items[key].id == testResult.id) {
this.items[key].verified = testResult.verified;
}
}