mirror of
https://git.meshkee.com/cssd/cssd-front.git
synced 2026-10-10 20:13:18 +03:30
fix: refactor and optimize the label component and better name existing elements
This commit is contained in:
Al-Khalsi
Generated
+3605
-6713
File diff suppressed because it is too large
Load Diff
+485
-283
@@ -1,306 +1,508 @@
|
||||
<template>
|
||||
<v-container grid-list-xs>
|
||||
<material-card color="black" title="Show Label">
|
||||
<v-layout align-left justify-left wrap class="px-3 my-3">
|
||||
<h3 class="mt-0">Label</h3>
|
||||
<v-flex xs12>
|
||||
<hr class="v-divider theme--light">
|
||||
</v-flex>
|
||||
<v-layout id="printMe">
|
||||
<v-flex xs12 md12 sm12>
|
||||
<!-- ________ row1::Begin ________ -->
|
||||
<v-layout row wrap>
|
||||
<!-- ________ Column1::Begin ________ -->
|
||||
<v-flex xs6 md6 sm6>
|
||||
<v-layout row wrap class="">
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="WM-d-flex">
|
||||
<span class="headline ml-1 mb-1" style="letter-spacing:0 !important">
|
||||
{{ (data.user && data.user.medical_center) ? data.user.medical_center.name : "" }}
|
||||
</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12 class="">
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-location"/>
|
||||
<span class="headline ml-1 mb-1"
|
||||
style="letter-spacing:0 !important">{{ data.package.name }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-Industry"/>
|
||||
<span class="headline ml-2 mb-1"
|
||||
style="letter-spacing:0 !important">{{ data.sterile_date }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-hourglass"/>
|
||||
<span class="headline ml-2 mb-1"
|
||||
style="letter-spacing:0 !important">{{ data.expire_date }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-user"/>
|
||||
<span class="headline ml-2 mb-1" style="letter-spacing:0 !important">
|
||||
{{ data.user ? data.user.name : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<!-- ________ Column1::End ________ -->
|
||||
<!-- ________ Column2::Begin ________ -->
|
||||
<v-flex xs6 md6 sm6>
|
||||
<v-layout row wrap class="WM-Align-R mt-2">
|
||||
<v-flex xs12 v-if="QRCodeimg">
|
||||
<a :href="'https://www.cssd-doc.com/Show/Label/'+data.id+''"
|
||||
target="_blank">
|
||||
<img :src="QRCodeimg" class="WM-Width-120">
|
||||
</a>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class>
|
||||
<span class="title">Sterilizer ID :</span>
|
||||
<span class="headline ml-1 mb-1"
|
||||
style="letter-spacing:0 !important">{{ data.sterilizer_id }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class>
|
||||
<span class="title">Cycle No :</span>
|
||||
<span class="headline ml-2 mb-1"
|
||||
style="letter-spacing:0 !important">{{ data.cycle_number }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<!-- ________ Column2::End ________ -->
|
||||
</v-layout>
|
||||
<!-- ________ row1::Begin ________ -->
|
||||
<v-container grid-list-xs>
|
||||
<material-card color="black" title="Show Label">
|
||||
<v-layout align-left justify-left wrap class="px-3 my-3">
|
||||
<h3 class="mt-0">Label</h3>
|
||||
<v-flex xs12>
|
||||
<hr class="v-divider theme--light" />
|
||||
</v-flex>
|
||||
<v-layout id="printMe">
|
||||
<v-flex xs12 md12 sm12>
|
||||
<!-- ________ row1::Begin ________ -->
|
||||
<v-layout row wrap class="rowP">
|
||||
<!-- ________ Column1::Begin ________ -->
|
||||
<v-flex xs6 md6 sm6>
|
||||
<v-layout row wrap class="all-content">
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="WM-d-flex">
|
||||
<span
|
||||
class="headline ml-1 mb-1 bold-text"
|
||||
style="letter-spacing: 0 !important"
|
||||
>
|
||||
{{
|
||||
data.user && data.user.medical_center
|
||||
? data.user.medical_center.name
|
||||
: ""
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12 class="">
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-location" />
|
||||
<span
|
||||
class="headline ml-1 mb-1 bold-text"
|
||||
style="letter-spacing: 0 !important"
|
||||
>{{ data.package.name }}</span
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-Industry" />
|
||||
<span
|
||||
class="headline ml-2 mb-1 bold-text"
|
||||
style="letter-spacing: 0 !important"
|
||||
>{{ data.sterile_date }}</span
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-hourglass" />
|
||||
<span
|
||||
class="headline ml-2 mb-1 bold-text"
|
||||
style="letter-spacing: 0 !important"
|
||||
>{{ data.expire_date }}</span
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-user" />
|
||||
<span
|
||||
class="headline ml-2 mb-1 bold-text"
|
||||
style="letter-spacing: 0 !important"
|
||||
>
|
||||
{{ data.user ? data.user.name : "" }}
|
||||
</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<!-- Add Sterilizer ID and Cycle No to left column -->
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="content-th">
|
||||
<span class="title">Sterilizer ID:</span>
|
||||
<span
|
||||
class="headline ml-1 mb-1 bold-text"
|
||||
style="letter-spacing: 0 !important"
|
||||
>{{ data.sterilizer_id }}</span
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="content-th">
|
||||
<span class="title">Cycle No:</span>
|
||||
<span
|
||||
class="headline ml-2 mb-1 bold-text"
|
||||
style="letter-spacing: 0 !important"
|
||||
>{{ data.cycle_number }}</span
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<!-- ________ Column1::End ________ -->
|
||||
<!-- ________ Column2::Begin ________ -->
|
||||
<v-flex xs6 md6 sm6>
|
||||
<v-layout row wrap class="WM-Align-R mt-2">
|
||||
<!-- QR Code only in right column -->
|
||||
<v-flex xs12 v-if="QRCodeimg">
|
||||
<a
|
||||
:href="
|
||||
'https://www.cssd-doc.com/Show/Label/' + data.id + ''
|
||||
"
|
||||
target="_blank"
|
||||
>
|
||||
<img :src="QRCodeimg" class="QRCodeClass" />
|
||||
</a>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<!-- ________ Column2::End ________ -->
|
||||
</v-layout>
|
||||
<!-- ________ row1::Begin ________ -->
|
||||
|
||||
|
||||
<!-- ________ row2::Begin ________ -->
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="mt-4" style="text-align:center">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs6 md12 sm12 v-if="barcodeimg">
|
||||
<img :src="barcodeimg" class="WM-Width-350"><br/>
|
||||
<span>{{ data.id }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<!-- ________ row2::End ________ -->
|
||||
<!-- ________ row2::Begin ________ -->
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 md12 sm12>
|
||||
<div class="BotSection" style="text-align: center">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs6 md12 sm12 v-if="barcodeimg">
|
||||
<img :src="barcodeimg" class="BarcodeClass" />
|
||||
<!-- <span class="dataId">{{ data.id }}</span> -->
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout align-left justify-left wrap class="px-3 my-3">
|
||||
<h3 class="ml-3">Package</h3>
|
||||
<v-flex xs12>
|
||||
<hr class="v-divider theme--light">
|
||||
</v-flex>
|
||||
<v-layout row wrap class="mx-3">
|
||||
<template>
|
||||
<v-expansion-panel class="WM-Panel">
|
||||
<v-expansion-panel-content>
|
||||
<template v-slot:header>
|
||||
<v-layout row class="CSSD-font">
|
||||
<v-layout row class="pl-2">
|
||||
<v-flex xs12 sm6 md4>
|
||||
<span class="sub-text">Package ID:</span> {{ data.package.id }}
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md8 class="d-flex">
|
||||
<div>
|
||||
<span class="sub-text">Package Name:</span> {{ data.package.name }}
|
||||
</div>
|
||||
<v-spacer/>
|
||||
<a :href="'https://www.cssd-doc.com/Show/Package/' + data.package.id + ''"
|
||||
target="_blank" style="max-width: fit-content;">
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn v-bind="attrs" v-on="on" @click.stop.native=""
|
||||
color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2">
|
||||
<v-icon class="black--text caption">fas fa-search
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Filter</span>
|
||||
</v-tooltip>
|
||||
</a>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-text>note : {{ data.package.note }}</v-card-text>
|
||||
<v-card-text v-if="data.package.items && data.package.items.length">
|
||||
Items :
|
||||
<v-expansion-panel class="WM-Panel" v-for="(item, key) in data.package.items"
|
||||
:key="key">
|
||||
<v-expansion-panel-content>
|
||||
<template v-slot:header>
|
||||
<v-layout row class="CSSD-font">
|
||||
<span class="item-counter">{{ key + 1 }}</span>
|
||||
<v-layout row class="pl-2">
|
||||
<v-flex xs12 sm6 md3>
|
||||
<span class="sub-text">Item ID:</span> {{ item.id }}
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md5>
|
||||
<span class="sub-text">Item Name:</span> {{ item.name }}
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md4 v-if="item.pivot">
|
||||
<span class="sub-text">Item Pivot counter:</span>
|
||||
{{ item.pivot.count }}
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
<!-- <div>{{ item.name }} ({{ item.pivot.count }})</div>-->
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-text>note : {{ item.note }}</v-card-text>
|
||||
</v-card>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</template>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
<v-layout row wrap align-center justify-center class="px-3">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" style="padding:10px 60px"
|
||||
@click="closeModal">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
|
||||
<span class="black--text">Close</span>
|
||||
</v-btn>
|
||||
<v-spacer/>
|
||||
<v-btn class="WM-CyanBlueGradient-BG" @click="print" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
|
||||
<span class="white--text">Print</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
<!-- ________ row2::End ________ -->
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
<v-layout align-left justify-left wrap class="px-3 my-3">
|
||||
<h3 class="ml-3">Package</h3>
|
||||
<v-flex xs12>
|
||||
<hr class="v-divider theme--light" />
|
||||
</v-flex>
|
||||
<v-layout row wrap class="mx-3">
|
||||
<template>
|
||||
<v-expansion-panel class="WM-Panel">
|
||||
<v-expansion-panel-content>
|
||||
<template v-slot:header>
|
||||
<v-layout row class="CSSD-font">
|
||||
<v-layout row class="pl-2">
|
||||
<v-flex xs12 sm6 md4>
|
||||
<span class="sub-text">Package ID:</span>
|
||||
{{ data.package.id }}
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md8 class="d-flex">
|
||||
<div>
|
||||
<span class="sub-text">Package Name:</span>
|
||||
{{ data.package.name }}
|
||||
</div>
|
||||
<v-spacer />
|
||||
<a
|
||||
:href="
|
||||
'https://www.cssd-doc.com/Show/Package/' +
|
||||
data.package.id +
|
||||
''
|
||||
"
|
||||
target="_blank"
|
||||
style="max-width: fit-content"
|
||||
>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
@click.stop.native=""
|
||||
color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2"
|
||||
>
|
||||
<v-icon class="black--text caption"
|
||||
>fas fa-search
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Filter</span>
|
||||
</v-tooltip>
|
||||
</a>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-text>note : {{ data.package.note }}</v-card-text>
|
||||
<v-card-text
|
||||
v-if="data.package.items && data.package.items.length"
|
||||
>
|
||||
Items :
|
||||
<v-expansion-panel
|
||||
class="WM-Panel"
|
||||
v-for="(item, key) in data.package.items"
|
||||
:key="key"
|
||||
>
|
||||
<v-expansion-panel-content>
|
||||
<template v-slot:header>
|
||||
<v-layout row class="CSSD-font">
|
||||
<span class="item-counter">{{ key + 1 }}</span>
|
||||
<v-layout row class="pl-2">
|
||||
<v-flex xs12 sm6 md3>
|
||||
<span class="sub-text">Item ID:</span>
|
||||
{{ item.id }}
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md5>
|
||||
<span class="sub-text">Item Name:</span>
|
||||
{{ item.name }}
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md4 v-if="item.pivot">
|
||||
<span class="sub-text"
|
||||
>Item Pivot counter:</span
|
||||
>
|
||||
{{ item.pivot.count }}
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-text>note : {{ item.note }}</v-card-text>
|
||||
</v-card>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</template>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
<v-layout row wrap align-center justify-center class="px-3">
|
||||
<v-btn
|
||||
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
|
||||
style="padding: 10px 60px"
|
||||
@click="closeModal"
|
||||
>
|
||||
<v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
|
||||
<span class="black--text">Close</span>
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
class="WM-CyanBlueGradient-BG"
|
||||
@click="print"
|
||||
style="padding: 10px 60px"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
|
||||
<span class="white--text">Print</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style media="screen">
|
||||
.WM-d-flex {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import {mapGetters, mapMutations} from "vuex";
|
||||
import {ApiService} from "@/services";
|
||||
import {urls} from "@/config/urls";
|
||||
import { mapGetters, mapMutations } from "vuex";
|
||||
import { ApiService } from "@/services";
|
||||
import { urls } from "@/config/urls";
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
data: {},
|
||||
QRCodeimg: '',
|
||||
barcodeimg: ''
|
||||
|
||||
}),
|
||||
methods: {
|
||||
...mapMutations("modal", ["closeModal", "setResultModal"]),
|
||||
// async verify(id) {
|
||||
// const result = await ApiService.post(urls.verifyPackage(id));
|
||||
// if (result && result.status == 200) {
|
||||
// this.setResultModal(result.data.data);
|
||||
// this.closeModal();
|
||||
// }
|
||||
// },
|
||||
async generateQRcodePackage(packageId) {
|
||||
const result = await ApiService.post(urls.packageQRCode(packageId));
|
||||
if (result && result.status == 200) {
|
||||
this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null;
|
||||
}
|
||||
},
|
||||
async generateBarcode(labelId) {
|
||||
const result = await ApiService.post(urls.Barcode(labelId, 'Label'));
|
||||
if (result && result.status == 200) {
|
||||
this.barcodeimg = result.data.data.Barcode ? result.data.data.Barcode : null;
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
|
||||
// Add custom styles for label printing
|
||||
const labelStyles = `<style>
|
||||
@page {
|
||||
size: auto;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#printMe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>`;
|
||||
|
||||
// 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} ${labelStyles} <title>Print Label</title> </head><body>${prtHtml}</body> </html> `);
|
||||
|
||||
WinPrint.document.close();
|
||||
WinPrint.focus();
|
||||
|
||||
// Delay print to ensure content is loaded
|
||||
setTimeout(() => {
|
||||
WinPrint.print();
|
||||
WinPrint.close();
|
||||
}, 500);
|
||||
}
|
||||
data: () => ({
|
||||
data: {},
|
||||
QRCodeimg: "",
|
||||
barcodeimg: "",
|
||||
}),
|
||||
methods: {
|
||||
...mapMutations("modal", ["closeModal", "setResultModal"]),
|
||||
// async verify(id) {
|
||||
// const result = await ApiService.post(urls.verifyPackage(id));
|
||||
// if (result && result.status == 200) {
|
||||
// this.setResultModal(result.data.data);
|
||||
// this.closeModal();
|
||||
// }
|
||||
// },
|
||||
async generateQRcodePackage(packageId) {
|
||||
const result = await ApiService.post(urls.packageQRCode(packageId));
|
||||
if (result && result.status == 200) {
|
||||
this.QRCodeimg = result.data.data.QRCode
|
||||
? result.data.data.QRCode
|
||||
: null;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.data = this.getModalProperties.result.data.data;
|
||||
this.generateQRcodePackage(this.data.package.id);
|
||||
this.generateBarcode(this.data.id);
|
||||
async generateBarcode(labelId) {
|
||||
const result = await ApiService.post(urls.Barcode(labelId, "Label"));
|
||||
if (result && result.status == 200) {
|
||||
this.barcodeimg = result.data.data.Barcode
|
||||
? result.data.data.Barcode
|
||||
: null;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("modal", ["getModalProperties"])
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
const labelStyles = `<style media="print">
|
||||
@page {
|
||||
size: aotu !important;
|
||||
margin: 100px 0 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
body {
|
||||
margin: 0 !important;
|
||||
padding: 0.5mm !important;
|
||||
font-family: Arial, sans-serif !important;
|
||||
width: 65mm !important;
|
||||
height: 80mm !important;
|
||||
overflow: hidden !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
#printMe {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-height: 80mm !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 auto !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
align-items: center !important;
|
||||
transform: scale(1) !important;
|
||||
transform-origin: center !important;
|
||||
page-break-after: avoid !important;
|
||||
}
|
||||
#printMe > .v-flex {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: space-between !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
#printMe > .v-flex > .v-layout:last-of-type {
|
||||
margin-top: auto !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
.v-layout {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
width: 100% !important;
|
||||
justify-content: center !important;
|
||||
align-items: flex-start !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
.v-flex {
|
||||
flex: 1 1 45% !important;
|
||||
padding: 0.2mm !important;
|
||||
margin: 0.1mm !important;
|
||||
text-align: left !important;
|
||||
min-height: 0 !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
.BotSection .v-flex {
|
||||
flex: 0 0 100% !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
.content-th {
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
margin: 1px 0 !important;
|
||||
}
|
||||
.headline {
|
||||
font-size: 12px !important;
|
||||
line-height: 1 !important;
|
||||
margin: 0px 0 0 !important;
|
||||
padding: 3px 0 0 !important;
|
||||
color: black !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
.bold-text {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.title {
|
||||
font-size: 10px !important;
|
||||
color: black !important;
|
||||
margin: 0 0 4px !important;
|
||||
padding: 0 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
/* Right column alignment for QR code */
|
||||
.WM-Align-R {
|
||||
position: relative !important;
|
||||
align-items: flex-start !important;
|
||||
justify-content: flex-end !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.QRCodeClass {
|
||||
max-width: 20mm !important;
|
||||
max-height: 20mm !important;
|
||||
object-fit: scale-down !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.BarcodeClass {
|
||||
max-width: 30mm !important;
|
||||
max-height: 12mm !important;
|
||||
object-fit: scale-down !important;
|
||||
margin: 0 auto 0.5mm auto !important;
|
||||
display: block !important;
|
||||
}
|
||||
.dataId {
|
||||
font-size: 8px;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
.BotSection {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin-top: 0 !important;
|
||||
text-align: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
hr {
|
||||
display: none !important;
|
||||
}
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
image-rendering: crisp-edges !important;
|
||||
}
|
||||
.rowP {
|
||||
margin: 0 4mm;
|
||||
}
|
||||
/* Adjust spacing for better layout */
|
||||
.WMi-location, .WMi-Industry, .WMi-hourglass, .WMi-user {
|
||||
font-size: 8px !important;
|
||||
width: 8px !important;
|
||||
height: 8px !important;
|
||||
margin-right: 2mm !important;
|
||||
margin-top: 0.3mm !important;
|
||||
}
|
||||
/* Column specific adjustments */
|
||||
#printMe > .v-flex > .v-layout > .v-flex:first-child {
|
||||
flex: 1 1 60% !important;
|
||||
}
|
||||
#printMe > .v-flex > .v-layout > .v-flex:last-child {
|
||||
flex: 1 1 40% !important;
|
||||
text-align: center !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
</style>`;
|
||||
|
||||
// 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} ${labelStyles} <title>Print Label</title> </head><body>${prtHtml}</body> </html> `
|
||||
);
|
||||
|
||||
WinPrint.document.close();
|
||||
WinPrint.focus();
|
||||
|
||||
// Delay print to ensure content is loaded
|
||||
setTimeout(() => {
|
||||
WinPrint.print();
|
||||
WinPrint.close();
|
||||
}, 500);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.data = this.getModalProperties.result.data.data;
|
||||
this.generateQRcodePackage(this.data.package.id);
|
||||
this.generateBarcode(this.data.id);
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("modal", ["getModalProperties"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item-counter {
|
||||
font-size: 44px;
|
||||
opacity: .3;
|
||||
font-family: 'Montserrat-Bold';
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: #b7b7b7;
|
||||
font-size: 44px;
|
||||
opacity: 0.3;
|
||||
font-family: "Montserrat-Bold";
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: #b7b7b7;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user