cssd-back/resources/js/vue/views/TestResult/Show.vue

<template>
	<v-container grid-list-xs>
		<material-card color="black" title="Show Test Result" id="printMe">
			<v-layout align-left justify-left wrap class="px-5 my-3">
				<h3 class="ml-3">Common Info</h3>
				<v-flex xs12>
					<hr class="v-divider theme--light" />
				</v-flex>
				<v-layout row wrap class="ml-4">
					<v-flex xs12 md6 sm6>
						<div class>
							<span class="title">{{ data.device_label || 'AutoclaveID' }} :</span>
							<span class="headline SCCD-font ml-2" style="letter-spacing:0 !important">{{ data.device_id }}</span>
						</div>
					</v-flex>
					<v-flex xs12 md6 sm6>
						<div class>
							<span class="title">Result :</span>
							<v-icon class="green--text ml-2 caption">fas fa-check</v-icon>
							<span class="headline SCCD-font ml-1" style="letter-spacing:0 !important">{{ data.result }}</span>
						</div>
					</v-flex>
					<v-flex xs12 md6 sm6>
						<div class>
							<span class="title">verify :</span>
							<v-icon class="pink--text ml-2 caption">fas fa-times</v-icon>
							<span class="headline SCCD-font ml-1" style="letter-spacing:0 !important">{{ data.verified }}</span>
						</div>
					</v-flex>
					<v-flex xs12 md6 sm6>
						<div class>
							<span class="title">Register User :</span>
							<span class="headline SCCD-font ml-2" style="letter-spacing:0 !important">{{ data.user.name }}</span>
						</div>
					</v-flex>
					<v-flex xs12 md6 sm6>
						<div class>
							<span class="title">Date :</span>
							<span class="headline SCCD-font ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
						</div>
					</v-flex>
					<v-flex xs12 md6 sm6>
						<div class>
							<span class="title">Medical Center :</span>
							<span
								class="headline SCCD-font ml-2"
								style="letter-spacing:0 !important"
							>{{ data.user.medical_center.name }}</span>
						</div>
					</v-flex>
				</v-layout>
			</v-layout>
			<v-layout align-left justify-left wrap class="px-5 my-3">
				<h3 class="ml-3">Special Info</h3>
				<v-flex xs12>
					<hr class="v-divider theme--light" />
				</v-flex>
				<v-layout row wrap class="ml-4">
					<template v-if="data.inputs">
						<v-flex xs12 md6 sm6 v-for="(inputData, keyInputs) in data.inputs" :key="keyInputs">
							<span class="title">{{keyInputs}} :</span>
							<span class="headline SCCD-font ml-2" style="letter-spacing:0 !important">{{inputData}}</span>
						</v-flex>
					</template>
					<template v-if="data.options">
						<v-flex xs12 md6 sm6 v-for="(optionData, keyOptions) in data.options" :key="keyOptions">
							<span class="title">{{keyOptions}} :</span>
							<span
								style="letter-spacing:0 !important"
								class="headline SCCD-font ml-2"
								v-for="(data, dataKey) in optionData"
								:key="dataKey"
							>{{data}},</span>
						</v-flex>
					</template>
					<template v-if="data.children">
						<v-flex xs12 md6 sm6 v-for="(formData, keyForm) in data.children" :key="keyForm">
							<h3 class="ml-3">{{keyForm}}</h3>
							<div v-for="(childData, keyChild) in formData" :key="keyChild">
								<div class="ml-4">
									<span class="title">{{keyChild}} :</span>
									<template v-if="Array.isArray(childData)">
										<span
											style="letter-spacing:0 !important"
											class="headline SCCD-font ml-2"
											v-for="(data, dataKey) in childData"
											:key="dataKey"
										>{{data}},</span>
									</template>
									<template v-else>
										<span class="headline SCCD-font ml-2">{{childData}}</span>
									</template>
								</div>
							</div>
						</v-flex>
					</template>
				</v-layout>
			</v-layout>
			<v-layout align-left justify-left wrap class="px-5 my-3">
				<h3 class="ml-3">Image</h3>
				<v-flex xs12>
					<hr class="v-divider theme--light" />
				</v-flex>
				<v-layout row wrap class="ml-4">
					<!-- <LightBox :media="data.title_image.map(img => img.path)"></LightBox> -->
					<!-- <v-flex xs12 md6 sm6 v-for="(img, key) in data.title_image" :key="key">
						<img :src="'/'+img.path" style="width: 20%;height:auto" />
					</v-flex> -->
				</v-layout>
			</v-layout>
		</material-card>
		<material-card>
			<v-layout row wrap align-center justify-center >
				<v-flex class xs12 md2 sm2>
					<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray" @click="print">
						<v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
						<span class="black--text">Print</span>
					</v-btn>
				</v-flex>
			</v-layout>
		</material-card>
	</v-container>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
	data: () => ({
		data: {
			user: {
				medical_center: {}
			}
		}
	}),
	methods: {
		print() {
			const prtHtml = document.getElementById("printMe").innerHTML;

			// Get all stylesheets HTML
			let stylesHtml = "";
			for (const node of [
				...document.querySelectorAll('link[rel="stylesheet"], style')
			]) {
				stylesHtml += node.outerHTML;
			}

			// Open the print window
			const WinPrint = window.open(
				"",
				"",
				"left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
			);

			WinPrint.document.write(`<!DOCTYPE html>
            <html>
            <head>
                ${stylesHtml}
            </head>
            <body>
                ${prtHtml}
            </body>
            </html>`);

			WinPrint.document.close();
			WinPrint.focus();
			WinPrint.print();
			WinPrint.close();
		},
		async load() {
			const result = await ApiService.get(
				urls.showTestResult(this.$route.params.testResult)
			);
			if (result && result.status == 200) {
				this.data = result.data.data;
			}
		}
	},
	created() {
		this.load();
	}
};
</script>